AngularJs混合式app打包步骤

您所在的位置:网站首页 angular 打包工具 AngularJs混合式app打包步骤

AngularJs混合式app打包步骤

2022-03-27 05:53| 来源: 网络整理| 查看: 265

一、 准备工作 需要安装: Nodejs、AndroidSDK、Apache-ant(暂时不知道有什么用)、Jdk, Ionic、Cordova、gradle(自动化构建工具、自动选择sdk)。 用到的版本 Nodejs: v8.1.3 JDK:1.8.0_144 Apache-ant: 1.9.9 Ionic:2.2.3(3版本打包貌似会出错) Cordova :7.0.1 Gradle 3.5 二、 环境配置 1. JDK的配置 1. 安装(自己选择是32/64位jdk)http://www.oracle.com/technet 2. 配置环境 3. 这里写图片描述 右键计算机——高级系统设置——高级——环境变量,如图:

选择【新建系统变量】–弹出“新建系统变量”对话框,在“变量名”文本框输入JAVA_HOME,在“变量值”文本框输入JDK的安装路径,单击“确定”按钮,如图: 这里写图片描述 3.至此Jdk环境配置完成 打开cmd,输入java -version,返回java版本号即为配置成功 3. nodejs环境配置 1..下载地址 https://nodejs.org/en/download/ 2.配置环境 [新版本都不需要设计环境变量了,软件会自动写入环境变量] 3.测试 4打开cmd,输入node -v,返回node版本号即为安装成功。 4. androidSDK环境配置 (*记得环境变量要有android_home) 1.下载地址 https://developer.android.com… 2.配置环境 和JAVA类似,在环境变量中找到Path选中,点击下面的【编辑】, 在变量值里加入androidSDK中tools和platform-tools的目录路径,这里我的是D:android-sdktools;D:android-sdkplatform-tools;当然两个之间要加个分号“;”。 Path = D:android-sdktools;D:android-sdkplatform-tools; 3.测试 打开cmd,输入adb,不报错即为成功。 这里写图片描述 这里写图片描述 这里写图片描述 4.Apache-ant环境配置 1.下载地址 http://ant.apache.org/bindown… 2.配置环境 和JAVA环境配置步骤基本一样, ANT_HOME D:SWEapache-ant-1.8.4 CLASSPATH ;%ANT_HOME%lib; PATH ;%ANT_HOME%bin; 3.测试 打开cmd,输入ant -version,返回版本号即为成功。 5.Ionic和Cordova的安装 1.下载及安装 打开cmd,如果之前装过,建议先运行一次 npm uninstall -g ionic 再执行 npm install -g ionic cordova 2.测试 输入ionic -v和cordova -v,分别返回ionic和cordova版本号即为安装成功 5. gradel环境配置 gradle_home的设置 1.进入你要创建项目的路径: cd E:\Study\Android\ionic\Project 2.创建一个名为myApp的还有tabs的项目(ionic start ) 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白) ionic start myApp tabs -a velcro -i com.velcro.mobile

3.myApp就为项目名称,进入myApp这个文件夹: cd myApp 4.把App文件项目复制到这个文件夹后, 添加android平台: E:\Study\Android\ionic\Project \ myApp \src E:\Study\Android\ionic\Project\myApp\www ionic platform add android (删除angular-ui-router.d.ts文件,否则打包不成功) 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

5.ionic会将本地的资源文件(支持png、psd和ai,尺寸越大越好)上传到它的服务器进行处理。 本地资源文件放到resources目录下,如果是某个平台单独的资源,可以放到对应平台下,比如resources/Android/icon.png。 这样就会把处理好的资源自动放到该平台下,而不是所有平台都放。 1、 替换E:\Study\Android\ionic\Project \ myApp \resources目录下的图片 Icon.png(app图标,推荐尺寸1024*1024,尺寸太大会报错),splash.png(启动图片) 这里写图片描述

ionic resources [–splash] [–icon] 把图标等文件用该命令上传自己的项目到ionic服务器,上传完成后会有一个项目编号。把res文件夹下的文件替换到 platforms/android/res下,把签名文件复制到 platforms/android/ 下 6.生成androidapk: ionic build android 即生成apk,文件保存在platforms/android/build/outputs/apk下 这里写图片描述 更改APP名称 1、 打开D:\NodeIonicCordav\IonicProject\velcro\config.xml 2、 修改 这里写图片描述 3、重新打包生效



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3